<template>
  <div class="article">
    <van-nav-bar
      title="文章详情"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 标题 -->
    <h1 class="title">在组件中获取动态路由参数在组件中获取动态路由参数</h1>

    <van-cell center class="user-info">
      <div slot="title" class="name">天涯</div>
      <van-image
        slot="icon"
        class="avatar"
        round
        fit="cover"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <div slot="label" class="pubdate">14小时前</div>
      <van-button class="follow-btn" icon="plus" round size="small" type="info"
        >关注</van-button
      >
    </van-cell>
    <div class="markdown-body">
      <p>hello</p>
      <p>world</p>
      <a href="">dad</a>
    </div>
  </div>
</template>

<script>
import "./github-markdown.css";
import { getArticleDetail } from "@/api/article";

// 在组件中获取动态路由参数
// 1. this.$route.params.articleId
// 2. props 传参  推荐  路由那里要设置 props: true
//    使用：this.articleId
export default {
  name: "articleIndex",
  props: {
    articleId: {
      // 多类型 可能是这三种
      type: [String, Number, Object],
      required: true,
    },
  },
  data() {
    return {};
  },
  created() {
    this.loadArticle();
  },
  computed: {},
  methods: {
    async loadArticle() {
      const { data } = await getArticleDetail(this.articleId);
      console.log(data);
    },
  },
};
</script>
<style lang='less' scoped>
.title {
  font-size: 40px;
  color: #3a3a3a;
  padding: 28px;
  background: #fff;
  margin: 0;
}
.user-info {
  .avatar {
    width: 70px;
    height: 70px;
    margin-right: 17px;
  }
  .name {
    font-size: 28px;
    color: #333;
  }
  .pubdate {
    font-size: 26px;
    color: #c0bfc0;
  }
  .follow-btn {
    width: 170px;
    height: 60px;
  }
}

.markdown-body {
  padding: 28px;
  font-size: 30px;
  background: #fff;
}
</style>